<template>
    <div style="margin: 30px;">
       <!-- <div>调拨编号：</div> -->
       <div style="margin: 30px 0">
            <el-form :inline="true">
                <el-form-item label="转出仓库">
                    <el-select v-model="outstore" size="medium" @change="handleChange">
                        <el-option :value="item.id" :label="item.storeName" v-for="item in selectedOptions" :key="item.index"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="转入仓库">
                    <el-select v-model="storeId" size="medium" @change="handleChange">
                        <el-option :value="item.id" :label="item.storeName" v-for="item in selectedOptions" :key="item.index"></el-option>
                    </el-select>
                    <el-select v-model="inputAreaId" size="medium" @change="handleChangetype">
                        <el-option :value="item.id" :label="item.areaName" v-for="item in deptData" :key="item.index"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="">
                        <span >{{inType}}余量 : {{unusedNum}}{{unit}}</span>
                        <!-- <span  v-else>(新酒货位)余量 : {{unusedNum}}</span> -->
                </el-form-item>
                <el-form-item label="" style="margin-left:50px">
                    <el-button type="primary" size="medium" @click="sureAllcat">确定调拨</el-button>
                    <el-button type="warning" size="medium" @click="Allcatrecord">调拨记录</el-button>
                </el-form-item>
            </el-form>
            <el-form :inline="true">
                    <el-form-item label="">
                        <el-input v-model="goodsId" autofocus @keyup.enter.native="smentry"  style="width:250px" placeholder="请录入商品ID"></el-input>
                    </el-form-item>
                    <el-form-item label="">
                        <el-button type="primary" size="medium" @click="smentry()">确定录入</el-button>
                    </el-form-item>
            </el-form>

    </div>
    <div class="wrapper">
            <el-table class="table" :data="tableData" stripe highlight-current-row border @selection-change="handleSelectionChange">
             <el-table-column
                type="index"
                width="50">
              </el-table-column>
              <el-table-column align="center" type="selection">
                </el-table-column>
              <el-table-column align="center" prop="goodsId" label="商品ID">
              </el-table-column>
              <el-table-column align="center" prop="goods_name" label="商品名称">
              </el-table-column>
              </el-table-column>
              <el-table-column align="center" prop="odorType" label="香型">
              </el-table-column>
              <el-table-column align="center" prop="netContent" label="净含量">
              </el-table-column>
              <el-table-column align="center" prop="alocohl" label="酒精度">
              </el-table-column>
              <el-table-column align="center" prop="unit" label="单位" width="50">
              </el-table-column>
              <el-table-column align="center" prop="ageName" label="现存位置">
              </el-table-column>
              <el-table-column align="center" prop="nowName" label="调拨后位置">
              </el-table-column>
              <el-table-column align="center" prop="address" label="明细备注" width="300">
                    <template slot-scope="scope">
                            <el-button
                            size="mini"
                            type="primary" plain
                            @click="istest(scope.row)" v-if="scope.row.description == ''">添加备注</el-button>
                           
                            <span class="canceloff-btn" @click="istest(scope.row)" style="color:blue" v-else>{{scope.row.description}}</span>
                        </template>

              </el-table-column>
              <!-- <el-table-column align="center" prop="description" label="明细备注" width="300">
                    <template slot-scope="scope">
                            <el-input v-model="remarks" placeholder="请输入备注"  @keyup.enter.native="writeinfos(scope.row)" v-if="remarksone"></el-input>
                            <span @click="istest(scope.row)" v-if="remarkstwo">{{scope.row.description}}111</span>
                        </template>
              </el-table-column> -->
            
              <el-table-column align="center" prop="address" label="操作" width="150">
                <template slot-scope="scope">
                  <span class="canceloff-btn" @click="cancelAllcat(scope.row)" style="color:blue">取消调拨</span>
                  
                </template>
              </el-table-column>
            </el-table>
            <!-- <el-pagination background layout="total,prev, pager, next,jumper" :page-size="page.pageSize" :total="page.total" :current-page="page.current"
              @current-change="handleCurrentChange">
            </el-pagination> -->
            <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page.current"
            :page-sizes="[10,20,30]"
            :page-size="page.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="page.total">
          </el-pagination>
          </div>
          <audio id="myaudio" src="../../../viode/004.mp3" controls="controls" hidden="hidden" ></audio>
          <audio id="warn" src="../../../viode/warn.mp3" controls="controls"  hidden="hidden"></audio>
          <el-dialog :title="titleb" :visible.sync="dialogFormVisible">
                <el-form>
                    <el-form-item label="">
                        <el-input v-model="remarks" placeholder="请输入备注"  @keyup.enter.native="writeinfos(scope.row)"></el-input>
                    </el-form-item>
                 
                </el-form>
                <div slot="footer" class="dialog-footer">
                  <el-button @click="dialogFormVisible = false">取 消</el-button>
                  <el-button type="primary" @click="sureData">确 定</el-button>
                </div>
              </el-dialog>
    </div>
</template>
<script>
        export default{
            data(){
                return{
                    outstore:'',
                    storeId:'',
                    inputAreaId:'',
                    selectedOptions:[],
                    deptData:[],
                    inType:'',
                    unusedNum:'',
                    page: {
                        pageSize: 10,
                        current: 1,
                        total: null
                    },
                    tableData:[],
                    goodsId:'',
                    goodNo:'',
                    unit:'',
                    remarks:'',
                    disabled:false,
                    remarksone:false,
                    remarkstwo:true,
                    dialogFormVisible:false,
                    titleb:'',
                    descId:''
                }
            },
            mounted () {
                this.area();
                this.inintable();
            },
            methods: {
                //货位
                handleChangetype(id){
                    this.numinfo(id)
                    this.$emit("handleChangetype", id);
                },
                //仓库
                handleChange(id){
                    this.inputAreaId = '';
                    this.areainfo(id)
                    this.$emit("handleChange", id);
                },
                //确定调拨
                sureAllcat(){
                    if(this.goodNo == ''){
                        this.$message({
                        type: "error",
                        message: "请勾选对应的商品"
                        });
                    }
                    this.suremove(this.goodNo);
                   
                },
                //取消调拨
                cancelAllcat(row){
                    this.$confirm("是否取消调拨?", "系统提示", {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        type: "warning"
                    }).then(() => {
                        this.goodNo = row.goodsId;
                        this.cancelmove(this.goodNo);
                        
                        // this.$message({
                        //   type: "success",
                        //   message: "删除成功!"
                        // });
                    }).catch(() => {
                        this.$message({
                        type: "info",
                        message: "已取消调拨"
                        });
                    });
                   
                    // this.cancelmove(val.goodsId);
                    // this.inintable();
                },
                //调拨记录
                Allcatrecord(){
                    this.$router.push({path:'/allCationdetails'});
                },
                //页码
                handleSizeChange(value){
                    this.page.pageSize = value;
                    this.inintable();
                },
                handleCurrentChange(value){
                    this.page.current = value;
                    this.inintable();
                },
                //多选
                handleSelectionChange(arr){
                    let array = [];
                    arr.forEach(element => {
                        array.push(
                        element.goodsId
                        )
                    });
              
                    this.goodNo = array.join(',');
                    
                    
                },
                //二维码录入
                smentry(){
                    if(this.inputAreaId == '' ||  this.goodsId == ''){
                    this.$message({
                        type: "error",
                        message: '商品id和转入货位不能为空'
                        });
                    }else{
                        if(this.storeId != this.outstore){
                            this.$message({
                            type: "error",
                            message: '请选择相同仓库进行调拨操作'
                            });
                        }else{
                            this.moveGoods();
                            this.goodsId = '';
                        }
                           
                    }
                },
           
                 //音频录入
                    autoplays(){
                    let audio =  document.getElementById('myaudio')
                    audio.currentTime = 0
                    audio.play();
                    // this.$netxTick(function(){
                    // console.log(document.getElementById('myaudio'), 999)
                    
                    //  })
                },
                //
                warnplay(){
                    let warn = document.getElementById('warn');
                    warn.currentTime = 0
                    warn.play();
                },
                async inintable(){
                    try{
                        let {data} = await this.$post({
                            api:'/show/allmove',
                            data:{
                                current:this.page.current,
                                pageSize:this.page.pageSize,
                                moveStatus:0,
                                startTime:'',
                                endTime:'',
                                moveNo:''
                            }
                        })
                        if(data.code === 0){
                            this.tableData = data.data;
                            this.page.total = data.rdPage.total;
                            console.log(data)
                        }
                    }catch(error){

                    }
                },
                //扫描录入
                async moveGoods(){
                    try{
                        let {data} = await this.$post({
                            api:'/scan/moveGoods',
                            data:{
                                goodsId:this.goodsId,
                                areaId:this.inputAreaId,
                                description:'',
                                
                            }
                        })
                        if(data.code === 0){
                            this.$message({
                                type: "success",
                                message: data.msg
                            });
                            this.autoplays();
                            this.inintable();
                        }else{
                            this.$message({
                                type: "error",
                                message: data.msg
                            });
                            this.warnplay();
                        }
                    }catch(error){

                    }
                },
                //仓库
                async area() {
                
                try {
                 
                  let { data } = await this.$post({
                    api: "/show/store/area"
                    
                  });
                  
                  if (data.code === 0) {
                    this.selectedOptions = data.data;
                 
                  } else {
                    this.$message({
                      type: "error",
                      message: data.msg
                    });
                  }
                } catch (e) {
                  // this.$message({
                  //   type: "error",
                  //   message: "接口报错"
                  // });
                }
              },
                //根据仓库id货位
               async areainfo(id) {
                  try {
                    let { data } = await this.$post({
                      api: "/show/store/areainfo",
                      data:{
                        storeId:id
                      }
                    });
                    if (data.code === 0) {
                      
                      this.deptData = data.data;
                      // this.inType = data.data[0].areaType;
                      // this.unusedNum = data.data[0].unusedNum;
                    console.log(data)
                    } else {
                      this.$message({
                        type: "error",
                        message: data.msg
                      });
                    }
                  } catch (e) {
                    // this.$message({
                    //   type: "error",
                    //   message: "接口报错"
                    // });
                  }
               },
               //根据仓库找数量
               async numinfo(id) {
                  try {
                    let { data } = await this.$post({
                      api: "/show/area/num",
                      data:{
                        // areaId:this.storeId,
                        areaId:id
                      }
                    });
                    if (data.code === 0) {
                      
                      // this.deptData = data.data;
                      this.inType = data.data.area_type;
                      this.unusedNum = data.data.unused_num;
                      this.unit = data.data.unit;
                    console.log(data)
                    } else {
                      this.$message({
                        type: "error",
                        message: data.msg
                      });
                    }
                  } catch (e) {
                    // this.$message({
                    //   type: "error",
                    //   message: "接口报错"
                    // });
                  }
               },
               //确定调度
               async suremove(id){
                   try{
                       let {data} = await this.$post({
                           api:'/sure/move',
                           data:{
                            goodsIds:id
                           }
                       })
                       if(data.code === 0){
                            this.$message({
                            type: "success",
                            message: data.msg
                        });
                        this.inintable();
                       }else{
                        this.$message({
                            type: "error",
                            message: data.msg
                        });  
                       }
                   }catch(error){

                   }
               },
               //取消调度
               async cancelmove(id){
                   try{
                       let {data} = await this.$post({
                           api:'/cancel/move',
                           data:{
                            goodsId:id
                           }
                       })
                       if(data.code === 0){
                            this.$message({
                            type: "success",
                            message: data.msg
                        });
                        this.inintable();
                       }else{
                        this.$message({
                            type: "error",
                            message: data.msg
                        });
                       }
                   }catch(error){

                   }
               },
               //调拨信息
               async writeinfo(id){
                   try{
                       let {data} = await this.$post({
                           api:'/write/info',
                           data:{
                            id:id,
                            info:this.remarks
                           }
                       })
                       if(data.code === 0){
                            this.$message({
                            type: "success",
                            message: data.msg
                        });
                        // this.disabled = true; 
                        this.dialogFormVisible = false;
                        this.inintable();
                       }else{
                        this.$message({
                            type: "error",
                            message: data.msg
                        });
                       }
                   }catch(error){

                   }
               },
               writeinfos(row){
                   this.writeinfo(row.id);
                   
                //    console.log(row)
               },
               istest(row){
                   this.descId = row.id
                   console.log(row)
                   if(row.description == ''){
                       this.titleb = '添加备注'
                   }else{
                   this.titleb = '修改备注'
                   }
                this.dialogFormVisible = true;
                this.remarks  = row.description;
                   
                //    this.two = false;
               },
               sureData(){
                //  console.log(this.descId)
                this.writeinfo(this.descId);
                
               }
            }
        }
    </script>